<template>
  <div class="dialog">
    <el-dialog
      :title="title"
      :visible.sync="visible"
      :close-on-click-modal="false"
      width="45%"
      top="20vh"
      @close="closeDialog"
    >
      <el-form
        :model="createForm"
        label-width="160px"
        label-suffix=":"
        class="searchw"
        :rules="rule"
        ref="createForm"
      >
        <el-row :gutter="24">
          <el-col :span="22">
            <el-form-item label="交接内容" prop="handoverContent">
              <el-input
                v-model.trim="createForm.handoverContent"
                placeholder="请输入交接内容"
                :disabled="title == '交接项详情'"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="22">
            <el-form-item label="交接项适用范围" prop="contentType">
              <el-select
                v-model="createForm.contentType"
                size="small"
                filterable
                placeholder="请选择交接项适用范围"
                :disabled="title == '交接项详情'"
              >
                <el-option
                  v-for="item in contentTypeList"
                  :key="item.code"
                  :value="item.code"
                  :label="item.name"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" v-if="title!='新增交接项'">
          <el-col :span="22">
            <el-form-item label="创建人" prop="createUser">
              <el-input
                v-model.trim="createForm.createUser"
                placeholder="请输入创建人"
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
         <el-row :gutter="24" v-if="title!='新增交接项'">
          <el-col :span="22">
            <el-form-item label="创建时间" prop="createTime">
              <el-input
                v-model.trim="createForm.createTime"
                placeholder="请输入创建时间"
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
         <el-row :gutter="24" v-if="title!='新增交接项'">
          <el-col :span="22">
            <el-form-item label="更新人" prop="updateUser">
              <el-input
                v-model.trim="createForm.updateUser"
                placeholder="请输入更新人"
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
         <el-row :gutter="24" v-if="title!='新增交接项'">
          <el-col :span="22">
            <el-form-item label="更新时间" prop="updateTime">
              <el-input
                v-model.trim="createForm.updateTime"
                placeholder="请输入更新时间"
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog()">关 闭</el-button>
        <el-button
          type="primary"
          @click="confirmData('createForm')"
          v-if="title != '交接项详情'"
          >保 存</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { validateUp } from '@/utils/validate'
export default {
  name: 'addBrand',
  props: {
    row: {
      type: Object,
      default: {}
    },
    title: {
      type: String,
      default: ''
    },
    value: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      visible: true,
      createForm: {
        id: '',
        handoverContent: '',
        contentType: '',
      },
      contentTypeList: [
        {
          code: '0',
          name: '普通员工',
        },
        {
          code: '1',
          name: '技工',
        },
        {
          code: '2',
          name: '通用',
        },
      ],
      rule:{
        handoverContent: [
          { required: true, message: '请输入交接内容', trigger: 'blur' },
        ],
        contentType: [
          { required: true, message: '请选择适用范围', trigger: 'change' },
        ],
      }
    }
  },
  created() {
    if(this.row.id){
      this.createForm = this.row
    }
  },
  mounted() {},
  methods: {
    confirmData(formName) {
      this.$refs[formName].validate((valid) => {
        if(valid) {
          this.$emit('ok', this.createForm)
        }
      })
    },
    closeDialog() {
      this.$emit('cancle')
    }
  }
}
</script>
<style scoped lang="less">
.el-select {
  width: 100%!important;
  /deep/.el-input{
    width: 100%!important;
  }
}
</style>
